- title = _("Repository graph")
- breadcrumb_title title
- page_title title, @ref

.project-network-header.gl-flex.gl-flex-col.gl-overflow-hidden
  = render ::Layouts::PageHeadingComponent.new(title) do |c|
    - c.with_description do
      = _("You can move around the graph by using the arrow keys.")

  .project-network
    .gl-flex.gl-flex-wrap.gl-items-start.gl-gap-3.gl-p-5.gl-bg-subtle.gl-border-t.gl-border-b
      .gl-min-w-26
        #js-graph-ref-switcher{ data: { project_id: @project.id, ref: @ref, network_path: project_network_path(@project, @ref, ref_type: @ref_type) } }

      #js-ref-search-form{ data: { network_path: project_network_path(@project, @ref, ref_type: @ref_type)} }

    - if @commit
      .network-graph.gl-overflow-scroll.gl-overflow-x-hidden{ tabindex: 0, role: 'figure', data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id, type: 'figure-branch-graph' } }
        = gl_loading_icon(size: 'md', css_class: 'gl-mt-5')
